<template>
    <a-card id="container">
      <!--<a-button type="primary" @click="close" ><a-icon type="close" />关闭文档</a-button>-->
      <div id="editorbox">


      </div>
    </a-card>

</template>

<script>

    //import remoteLoad from '@/utils/remoteload.js'
    // import { getMeetingInfo } from '@/api/meeting/meeting'
    // const md5 = require('md5');
    // import Watermark from '@/utils/waterMark'
    export default {
        name: 'DocumentView',
        components: {

        },
        data() {
            return {
              docEditor:"",
              meetingData:{},
              bindServer:'',
              seafileDomain:'',
              onlyofficeDomain:''

            }
        },
        props: {
          fileInfo:{
            type: Array,
            default(){
              return []
            }
          },
        },
        watch:{
          fileInfo:{
            deep: true,
            immediate:true,
            handler(value) {
              if(value.length){
                this.destoryDocEditor();
                this.initDocumentServer();
              }
            }
          },
        },
        methods:{
            initDocumentServer(){
              if(!this.docEditor){
                // const seafileApi = window.laconfig.seafileApi
                //const query = this.$route.query;
                //const fileName = query.fileName
                const fileName = this.fileInfo[0].fileName
                const userInfo = this.$store.getters.userInfo
                const ext = fileName.substring(fileName.lastIndexOf('.')+1);

                let filePath = this.fileInfo[0].filePath;
                let _time = 'n'+new Date().getTime();

                //加载js
                // let onlyofficeJs = this.onlyofficeDomain + '/web-apps/apps/api/documents/api.js'
                let onlyofficeJs = 'http://127.0.0.1:8000/web-apps/apps/api/documents/api.js'
              // let onlyofficeJs = `${window._CONFIG['onlyofficeURL']}web-apps/apps/api/documents/api.js`

                Promise.all([remoteLoad(onlyofficeJs)]).then(()=>{
                  const s = document.createElement('script');
                  s.type = 'text/javascript';
                  s.src = onlyofficeJs;
                  document.body.appendChild(s);
                  window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
                  window.addEventListener('unload', e => this.unloadHandler(e))
                  // console.log(this.meetingData.downloadable == 'true')
                  // let downloadable = this.meetingData.downloadable == 'true'
                  // let editable = this.meetingData.applyerId == userInfo.userId,
                  let downloadable = true;

                  //加载文档
                  this.docEditor = new DocsAPI.DocEditor("editorbox", // 元素id
                    {
                      "document": {
                        "fileType": ext, // 展示文件的类型
                        "title": fileName,
                        "key": _time,
                        "url": filePath //读取文件进行展示
                      },
                      "permissions": {
                        "edit": true,
                        "download":downloadable,
                        "print": downloadable
                      },
                      "editorConfig": {
                        "lang" : "zh-CN",
                        "user": {
                          // "id": userInfo.userId,
                          "name": userInfo.userName
                        },
                        // 回调接口，用于编辑后实现保存的功能,(关闭页面5秒左右会触发)
                        // "callbackUrl": seafileApi + "/api/saveFile?fileName="+encodeURI(fileName)+"&repoId="+this.meetingData.repoId+"&token="+query.token+"&seafile="+encodeURI(this.seafileDomain)
                      },

                      "height": "800px",
                      "width": "100%"
                    })


                  // let today = new Date()
                  // Watermark.set(this.meetingData.meetNo,today.toLocaleDateString())
                  /*setTimeout(()=>{
                    let today = new Date()
                    Watermark.set(this.meetingData.meetNo,today.toLocaleDateString()+userInfo.userName,'container')
                  },1500)*/
                })

                return;


                /*getMeetingInfo(query.meetId).then((res)=>{
                  if(res.code == 0){
                    this.meetingData = res.meetData
                    this.bindServer = res.bindServers
                    res.bindServers.forEach((e)=>{
                      switch (e.serveKey) {
                        case 'meet.file':
                          this.seafileDomain = "http://"+e.serveIp+":"+e.servePort
                          break
                        case 'meet.office':
                          this.onlyofficeDomain = "https://"+e.serveIp+":"+e.servePort
                          break
                      }
                    })
                    //加载js
                    let onlyofficeJs = `${window._CONFIG['onlyofficeURL']}web-apps/apps/api/documents/api.js`

                    Promise.all([remoteLoad(onlyofficeJs)]).then(()=>{
                      const s = document.createElement('script');
                      s.type = 'text/javascript';
                      s.src = onlyofficeJs;
                      document.body.appendChild(s);
                      window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
                      window.addEventListener('unload', e => this.unloadHandler(e))
                      console.log(this.meetingData.downloadable == 'true')
                      let downloadable = this.meetingData.downloadable == 'true'
                      // let editable = this.meetingData.applyerId == userInfo.userId,
                      //加载文档
                      this.docEditor = new DocsAPI.DocEditor("editorbox", // 元素id
                        {
                          "document": {
                            "fileType": ext, // 展示文件的类型
                            "title": fileName,
                            "key": query.fileId,
                            "url": query.url //读取文件进行展示
                          },
                          "permissions": {
                            "edit": true,
                            "download":downloadable,
                            "print": downloadable
                          },
                          "editorConfig": {
                            "lang" : "zh-CN",
                            "user": {
                              // "id": userInfo.userId,
                              "name": userInfo.userName
                            },
                            // 回调接口，用于编辑后实现保存的功能,(关闭页面5秒左右会触发)
                            "callbackUrl": seafileApi + "/api/saveFile?fileName="+encodeURI(fileName)+"&repoId="+this.meetingData.repoId+"&token="+query.token+"&seafile="+encodeURI(this.seafileDomain)
                          },

                          "height": "800px",
                          "width": "100%"
                        })


                      // let today = new Date()
                      // Watermark.set(this.meetingData.meetNo,today.toLocaleDateString())
                      setTimeout(()=>{
                        let today = new Date()
                        Watermark.set(this.meetingData.meetNo,today.toLocaleDateString()+userInfo.userName,'container')
                      },1500)
                    })







                  }else{
                    this.$router.go(-1)
                    this.$message.error("会议已关闭")
                  }

                }).catch((e)=>{
                  console.log(e);
                  // this.$notification.error("系统出错，获取会议信息失败")
                })*/


              }


            },
          close(){
            if(this.docEditor){
              this.docEditor.destroyEditor()
              this.docEditor = ""
            }
            this.$router.go(-1)
          },
          beforeunloadHandler(){
            this._beforeUnload_time=new Date().getTime();
          },
          unloadHandler(e){
            this._gap_time=new Date().getTime()-this._beforeUnload_time;
            //判断是窗口关闭还是刷新
            if(this._gap_time<=5){
              //如果是登录状态，关闭窗口前，移除用户
                this.destoryDocEditor()
              }
            },
          destoryDocEditor(){
            if(this.docEditor){
              this.docEditor.destroyEditor()
              this.docEditor = ""
            }
          }
        },
        mounted() {
          // this.initDocumentServer()
          // console.log(this.fileInfo)
        },
      destroyed(){
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.removeEventListener('unload', e => this.unloadHandler(e))

      },
      /*watch:{
        '$route': 'initDocumentServer'
      }*/
    }
</script>
